@extends('index.common.common')
@section('style')
    @parent

@endsection

@section('content')
    <div id="animated-number-demo">
        <input v-model.number="number" type="number" step="5"/>
        <p>@{{ animatedNumber }}</p>
    </div>
@endsection

@section('footer')
    @parent
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#animated-number-demo',
            data:{
                number:0,
                tweenedNumber:0
            },
            computed:{
                animatedNumber:function () {
                    return this.tweenedNumber.toFixed(0);
                }
            },
            watch:{
                number:function (newValue) {
                    TweenLite.to(this.$data,0.5,{tweenedNumber:newValue})
                }
            }
        });
    </script>
@endsection